<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-tabs v-model="tabActive">
            <el-tab-pane name="1" label="基础配置">
              <el-form ref="form-1" :model="form1" :rules="rules1" label-width="100px">
                <el-form-item label="网址" prop="website">
                  <el-input v-model="form1.website" placeholder="请输入网址"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="form1.email" placeholder="请输入邮箱"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="phone">
                  <el-input v-model="form1.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                  <el-input v-model="form1.address" placeholder="请输入地址"></el-input>
                </el-form-item>
                <el-form-item label="邮编" prop="yzcode">
                  <el-input v-model="form1.yzcode" placeholder="请输入邮编"></el-input>
                </el-form-item>
                <el-form-item label="二维码：" prop="image">
                  <div class="upLoadPicBox" @click="modalPicTap()" :disabled="isDisabled">
                    <div v-if="form1.qrcode" class="pictrue"><img :src="form1.qrcode"></div>
                    <div v-else class="upLoad">
                      <i class="el-icon-camera cameraIconfont" />
                    </div>
                  </div>
                </el-form-item>
                <el-row>
                  <el-col :span="24">
                    <el-form-item>
                      <el-button v-hasPermi="['admin:system:website:info']" v-loading="btnLoading" type="primary" @click="handleSubmit('form-1')">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane name="2" label="备案信息">
              <el-form ref="form-2" :model="form2" :rules="rules2" label-width="110px">
                <el-form-item label="公司名称" prop="company">
                  <el-input v-model="form2.company" placeholder="请输入公司名称"></el-input>
                </el-form-item>
                <el-form-item label="公网安备-地区" prop="public_name">
                  <el-input v-model="form2.public_name" placeholder="请输入公网安备-地区，如 “甘”"></el-input>
                </el-form-item>
                <el-form-item label="公网安备-号" prop="public_code">
                  <el-input v-model="form2.public_code" placeholder="请输入公网安备-号，如 “62090202000396”"></el-input>
                </el-form-item>
                <el-form-item label="备案号" prop="filing_code">
                  <el-input v-model="form2.filing_code" placeholder="请输入备案号"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="24">
                    <el-form-item>
                      <el-button v-hasPermi="['admin:system:website:info']" v-loading="btnLoading" type="primary" @click="handleSubmit('form-2')">保存</el-button>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { systemConfigInfo, systemConfigSave } from '@/api/systemSetting'

export default {
  data(){
    return{
      isDisabled: this.$route.params.isDisabled==='1'?true:false,
      tabActive:'1',
      form1:{
        website:'',
        email:'',
        phone:'',
        address:'',
        yzcode:'',
        qrcode:'',
      },
      rules1:{
        /*login_type: [{ required: true, message: '请选择付款模式', trigger: ['blur', 'change'] }],
        open_type: [{ required: true, message: '请选择跳转模式', trigger: ['blur', 'change'] }],*/
      },
      form2:{
        public_name:'',
        public_code:'',
        filing_code:'',
        company:'',
      },
      rules2:{
        /*xcx_appid: [{ required: true, message: '请输入小程序AppId', trigger: ['blur'] }],
        xcx_secret: [{ required: true, message: '请输入小程序AppSecret', trigger: ['blur'] }],
        xcx_qrcode_url: [{ required: true, message: '请输入小程序AppSecret', trigger: ['blur'] }],
        xcx_best_pay_url: [{ required: true, message: '请输入小程序AppSecret', trigger: ['blur'] }],*/
      },
      btnLoading:false,
    }
  },
  watch:{
    tabActive:{
      immediate:true,
      handler(index){
        this.getConf(index);
      }
    }
  },
  methods:{
    // 点击图标
    modalPicTap (i,status) {
      const _this = this;
      if(_this.isDisabled) return;
      this.$modalUpload(function(img) {
        _this.form1.qrcode = img[0].att_dir
      },'1', 'content')
    },

    handleSubmit(ref){
      this.$refs[ref].validate(valid=>{
        if(!valid) return
        this.btnLoading=true;
        let form=this['form'+this.tabActive];
        systemConfigSave(form).then(()=>{
          this.$message.success('保存成功');
          this.getConf(this.tabActive);
        }).finally(()=>{
          this.btnLoading=false;
        })
      })
    },
    getConf(type){
      const loading=this.$loading({text:'加载中'})
      systemConfigInfo(type).then(res=>{
        res.forEach(item=>{
          this['form'+type][item.key]=item.value;
        })
      }).finally(()=>{
        loading.close();
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .pictrue{
    width: 150px;
    height: 150px;
    border: 1px dotted rgba(0,0,0,0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img{
      width: 100%;
      height: 100%;
    }
    video{
      width: 100%;
      height: 100%;
    }
  }
  </style>
